<template>
  <div class="bill-box">
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
    >
      <div class="billCon">
        <div class="bill-list" v-for="(bill,index) in billList" :key="index" @click="showDetail(bill)">
          <div class="bill-title">
            <span v-if="bill.billType==1">{{bill.type | changeType}}:</span>
            <span v-else>账户提现:</span>
            <span v-if="bill.billType==1">+{{bill.money}}</span>
            <span v-else>-{{bill.money}}</span>
          </div>
          <div class="bill-time">
            <div class="time" v-if="bill.billType==1">{{bill.time | format}}</div>
            <div class="time" v-if="bill.billType==2">{{bill.endTime}}</div>
            <div class="status">
              <span v-if="bill.billType==1">已到蓝聘账户</span>
              <span v-else-if="bill.billType==2">{{bill.status}}</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>

    <div class="empty-wrap" v-if="billList.length == 0 && !loading">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>

  </div>
</template>

<script>
  import {formatDate} from "../../common/js/util"
  import {baseUrl} from "../../common/js/env"

  export default {
    data() {
      return {
        userSign: "",
        billList: [],
        currentPage: 1,
        PageSize: 20,
        loading: false,
        finished: false
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
    },
    methods: {
      onLoad() {
        // 异步更新数据
        setTimeout(() => {
          this.queryBill();
        }, 500);
      },
      queryBill() {//查询账单记录
        this.axios.get(baseUrl + "/billrecord/query_billrecord?sgin=" + this.userSign + "&page=" + this.currentPage + "&size=" + this.PageSize).then((res) => {
          let billObj = res.data;
          if (billObj.code == 0) {
            if (billObj.data != null && billObj.data.length > 0) {
              this.billList = this.billList.concat(billObj.data);
              for (let i = 0, length = this.billList.length; i < length; i++) {
                if (this.billList[i].billType == 2) {
                  this.billList[i].endTime = formatDate(new Date(this.billList[i].time), 'yyyy-MM-dd');
                  if (this.billList[i].type == 1) {
                    this.billList[i].status = "待处理";
                  } else if (this.billList[i].type == 2) {
                    this.billList[i].status = "处理中";
                    let curTime = new Date().getTime();
                    let accountTime = this.billList[i].set_time + 2 * 60 * 60 * 1000;
                    if (curTime >= accountTime) {
                      this.billList[i].status = "已完成";
                      this.billList[i].endTime = formatDate(new Date(accountTime), 'yyyy-MM-dd');
                    }
                  }
                }
              }
              //加载状态结束
              this.loading = false;
              this.currentPage++;
            } else {//数据全部加载完成
              this.loading = false;
              if (this.billList.length >= billObj.data.length) {
                this.finished = true;
              }
            }
          } else {
            this.$vux.toast.text(billObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      showDetail(bill) {
        if (bill.billType == 1) {
          let date = new Date(bill.time);
          let stamp = formatDate(date, 'yyyy-MM-dd hh:mm');
          this.$router.push({
            path: '/otherdetail',
            query: {billType: bill.billType, type: bill.type, money: bill.money, stamp: stamp}
          });
        } else {
          this.$router.push({path: '/billdetail', query: {id: bill.id}});
        }
      },
    },
    filters: {
      format(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd');
      },
      changeType(type) {
        let temp = "";
        if (type == 0) {
          temp = "其它";
        } else if (type == 1) {
          temp = "借支到账";
        } else if (type == 2) {
          temp = "管理费";
        } else if (type == 3) {
          temp = "工资到账";
        } else if (type == 4) {
          temp = "返费到账";
        } else if (type == 5) {
          temp = "邀请注册奖励";
        } else if (type == 7) {
          temp = "代扣借支";
        } else if (type == 8) {
          temp = "邀请入职奖励";
        } else if (type == 9) {
          temp = "蓝聘红包";
        }
        return temp;
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .bill-box
    width: 100%
    height: 100%
    .bill-list
      display: flex
      align-items: center
      width: 100%
      height: 1.893rem
      border-bottom: 0.013rem solid rgba(224, 224, 224, 1)
      .bill-title
        flex: 1
        margin-left: 0.44rem
        font-size: 0.44rem
        color: rgba(24, 24, 24, 1)
      .bill-time
        margin-right: 0.4rem
        .time
          font-size: 0.387rem
          color: rgba(146, 146, 146, 1)
        .status
          display: flex;
          justify-content: flex-end
          padding-top: 0.267rem
          font-weight: bold
          font-size: 0.333rem
          color: rgba(24, 24, 24, 1)
    .empty-wrap
      display: flex
      align-items: center
      justify-content: center
      width: 100%
      height: auto
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
</style>
